<template>
  <div>
    <div class="flex_top">
      <img :src="weixinPortrait" alt style="width:1.1733rem;height:1.1733rem;" />
      <div style=" margin-left: 0.2667rem;">
        <div style="color:#999;">{{weixinNickname}}</div>
        <div class="top_num">
          <div style="float:left">巢果余额：{{points}}</div>
          <div style="float:right;text-decoration:underline;color:#3E7BBD" @click="cz">购买巢果</div>
        </div>
      </div>
    </div>
    <ul>
      <li>
        <div class="vertical">
          <span>推送匹配房源</span>
          <img
            src="../assets/wh.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-left:0.2667rem"
            @click="tishi('开启后，平台将根据您的租房意向设置，主动向您推送匹配的房源')"
          />
        </div>
        <div class="vertical">
          <img
            src="../assets/shezhi.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-right:0.4rem"
            v-if="pushMatchingHouse"
            @click="sz('setHouese')"
          />
          <span style="margin-right:0.2667rem" v-else>10巢果/条</span>
          <van-switch
            :value="pushMatchingHouse"
            @input="onInput('pushMatchingHouse')"
            size="0.5rem"
            active-color="#F6CD48"
          />
        </div>
      </li>
      <li>
        <div class="vertical">
          <span>推送租房需求信息</span>
          <img
            src="../assets/wh.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-left:0.2667rem"
            @click="tishi('开启后，平台将根据您的招租设置，主动向您推送匹配的租房需求信息')"
          />
        </div>
        <div class="vertical">
          <img
            src="../assets/shezhi.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-right:0.4rem"
            v-if="pushRentalDemand"
            @click="sz('need')"
          />
          <span style="margin-right:0.2667rem" v-else>20巢果/条</span>
          <van-switch
            :value="pushRentalDemand"
            @input="onInput('pushRentalDemand')"
            size="0.5rem"
            active-color="#F6CD48"
          />
        </div>
      </li>
      <li>
        <div class="vertical">
          <span>推送包租信息</span>
          <img
            src="../assets/wh.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-left:0.2667rem"
            @click="tishi('开启后，平台将根据您的设置，主动向您推送匹配的包租信息')"
          />
        </div>
        <div class="vertical">
          <img
            src="../assets/shezhi.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-right:0.4rem"
            v-if="pushTrusteeshipInfo"
            @click="sz('setCharter')"
          />
          <span style="margin-right:0.2667rem" v-else>100巢果/条</span>
          <van-switch
            :value="pushTrusteeshipInfo"
            @input="onInput('pushTrusteeshipInfo')"
            size="0.5rem"
            active-color="#F6CD48"
          />
        </div>
      </li>
      <li>
        <div class="vertical">
          <span>推送房源电话查看提醒</span>
          <img
            src="../assets/wh.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-left:0.2667rem"
            @click="tishi('开启后，每当您的房源有用户查看了联系方式，平台就会向您推送提醒消息')"
          />
        </div>
        <div class="vertical">
          <span style="margin-right:0.2667rem"></span>
          <van-switch
            :value="pushGettingHouseMobile"
            @input="onInput('pushGettingHouseMobile')"
            size="0.5rem"
            active-color="#F6CD48"
          />
        </div>
      </li>
      <li>
        <div class="vertical">
          <span>推送看房预约信息</span>
          <img
            src="../assets/wh.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-left:0.2667rem"
            @click="tishi('开启后，每当您的房源有新的看房预约，平台就会向您推送提醒消息')"
          />
        </div>
        <div class="vertical">
          <span style="margin-right:0.2667rem"></span>
          <van-switch
            :value="pushHouseAppointment"
            @input="onInput('pushHouseAppointment')"
            size="0.5rem"
            active-color="#F6CD48"
          />
        </div>
      </li>
      <li>
        <div class="vertical">
          <span>推送留言提示</span>
          <img
            src="../assets/wh.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-left:0.2667rem"
            @click="tishi('开启后，每当您的房源有新的留言，平台就会向您推送提醒消息')"
          />
        </div>
        <div class="vertical">
          <span style="margin-right:0.2667rem"></span>
          <van-switch
            :value="pushLeavingMessage"
            @input="onInput('pushLeavingMessage')"
            size="0.5rem"
            active-color="#F6CD48"
          />
        </div>
      </li>
      <li>
        <div class="vertical">
          <span>推送账单状态变化提醒</span>
          <img
            src="../assets/wh.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-left:0.2667rem"
            @click="tishi('开启后，每当您有新的账单状态变化，平台就会向您推送提醒消息')"
          />
        </div>
        <div class="vertical">
          <span style="margin-right:0.2667rem"></span>
          <van-switch
            :value="pushBillStatusChange"
            @input="onInput('pushBillStatusChange')"
            size="0.5rem"
            active-color="#F6CD48"
          />
        </div>
      </li>
      <li>
        <div class="vertical">
          <span>推送余额变化提醒</span>
          <img
            src="../assets/wh.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-left:0.2667rem"
            @click="tishi('开启后，每当您有新的余额变化，平台就会向您推送提醒消息')"
          />
        </div>
        <div class="vertical">
          <span style="margin-right:0.2667rem"></span>
          <van-switch
            :value="pushCapitalChange"
            @input="onInput('pushCapitalChange')"
            size="0.5rem"
            active-color="#F6CD48"
          />
        </div>
      </li>
      <li>
        <div class="vertical">
          <span>推送巢果变化提醒</span>
          <img
            src="../assets/wh.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-left:0.2667rem"
            @click="tishi('开启后，每当您有新的巢果变化，平台就会向您推送提醒消息')"
          />
        </div>
        <div class="vertical">
          <span style="margin-right:0.2667rem"></span>
          <van-switch
            :value="pushPointsChange"
            @input="onInput('pushPointsChange')"
            size="0.5rem"
            active-color="#F6CD48"
          />
        </div>
      </li>
      <li>
        <div class="vertical">
          <span>推送影响力变化提醒</span>
          <img
            src="../assets/wh.png"
            alt
            style="width:0.4267rem;height:0.4267rem;margin-left:0.2667rem"
            @click="tishi('开启后，每当您有新的影响力变化，平台就会向您推送提醒消息')"
          />
        </div>
        <div class="vertical">
          <span style="margin-right:0.2667rem"></span>
          <van-switch
            :value="pushInfluencesChange"
            @input="onInput('pushInfluencesChange')"
            size="0.5rem"
            active-color="#F6CD48"
          />
        </div>
      </li>
    </ul>
    <!-- <model :msg="msg" butName="立即关闭" :api="api" :isModel="isModel"></model> -->
    <van-popup v-model="isModel">
      <div class="box">
        <div class="img" @click="off">
          <img src="../assets/close.png" style="width:0.32rem;height:0.32rem" />
        </div>
        <div style="white-space: pre-wrap;" v-html="msg"></div>
        <button @click="close">{{butName}}</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import model from "@/components/model.vue";
import { ajax, login } from "@/js/api";
import { Dialog, Toast } from "vant";
import wx from "weixin-js-sdk";
export default {
  name: "index",
  data() {
    return {
      isModel: false,
      api: "",
      msg: `<div>是否关闭房源推送功能？</div><div>关闭后将不能第一时间获取到新房源信息。</div>`,
      butName: "立即关闭",
      pushMatchingHouse: false, //匹配
      pushRentalDemand: false, //需求
      pushTrusteeshipInfo: false, //包租
      pushGettingHouseMobile: false, //电话查看
      pushHouseAppointment: false, //预约,
      pushLeavingMessage: false,
      pushBillStatusChange: false,
      pushCapitalChange: false,
      pushPointsChange: false,
      pushInfluencesChange: false,
      points: 0,
      price: 0,
      weixinPortrait: "",
      weixinNickname: "",
      setId: ""
    };
  },
  components: {
    model: model
  },
  mounted() {
    login();
    if (this.$store.state.token == "") return;
    this.getMySet();
    this.getcg();
    this.jsddk();
  },
  methods: {
    getMySet() {
      ajax("userSetting", "", "get", res => {
        console.log(res);
        if (res.data.code == 200) {
          this.setId = res.data.data.id;
          this.pushMatchingHouse = res.data.data.pushMatchingHouse; //匹配
          this.pushRentalDemand = res.data.data.pushRentalDemand; //需求
          this.pushTrusteeshipInfo = res.data.data.pushTrusteeshipInfo; //包租
          this.pushGettingHouseMobile = res.data.data.pushGettingHouseMobile; //电话查看
          this.pushHouseAppointment = res.data.data.pushHouseAppointment; //预约
          this.pushLeavingMessage = res.data.data.pushLeavingMessage; //预约
          this.pushBillStatusChange = res.data.data.pushBillStatusChange;
          this.pushCapitalChange = res.data.data.pushCapitalChange;
          this.pushPointsChange = res.data.data.pushPointsChange;
          this.pushInfluencesChange = res.data.data.pushInfluencesChange;
        } else if (res.data.code == 105) {
          login();
        }
      });
    },
    off() {
      if (this.isModel) {
        this.isModel = false;
      } else {
        this.isModel = true;
      }
    },
    close() {
      let data = {
          userId: this.$store.state.userId
        },
        that = this;
      if (this.butName == "立即关闭") {
        ajax(this.api + "/closeLastOne", data, "post", res => {
          if (res.data.code == 200) {
            Toast.success("关闭成功！");
            that.isModel = false;
            that.getMySet();
          }
        });
      } else {
        data = {
          payment: "微信支付",
          source: "H5端",
          amount: this.price * 10,
          appid: this.$store.state.appid
        };
        ajax(
          "user/rechargePoints/" + this.$store.state.userId,
          data,
          "post",
          res => {
            if (res.data.code == 200) {
              wx.chooseWXPay({
                timestamp: res.data.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: res.data.data.nonceStr, // 支付签名随机串，不长于 32 位
                package: res.data.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: res.data.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: res.data.data.paySign, // 支付签名
                success: function(res) {
                  // 支付成功后的回调函数
                  Toast.success("充值成功");
                  that.isModel = false;
                },
                fail(rej) {
                  Toast.fail("充值失败");
                }
              });
            }
          }
        );
      }
    },
    cz() {
      this.$router.push("./recharge");
    },
    onInput(name) {
      let val,
        that = this,
        data = {};
      switch (name) {
        case "pushMatchingHouse":
          val = this.pushMatchingHouse;
          if (val) {
            this.isModel = true;
            this.api = "pushSettingOfHouse";
          } else {
            if (this.points > 100) {
              this.$router.push({
                path: "setHouese",
                query: { isNew: true }
              });
            } else {
              this.msg = `<div>要开启本功能，巢果余额</div><div>不能低于100，是否现在充值?</div>`;
              this.butName = "立即充值";
              this.isModel = true;
              this.price = 100;
            }
          }
          break;
        case "pushRentalDemand":
          val = this.pushRentalDemand;
          if (val) {
            this.isModel = true;
            this.api = "pushSettingOfDemand";
            this.msg = `<div> 是否关闭租房需求推送功能？</div><div>关闭后将不能第一时间获取到租客的租房需求了。</div>`;
          } else {
            if (this.points > 200) {
              this.$router.push({ path: "need", query: { isNew: true } });
            } else {
              this.msg = `<div>要开启本功能，巢果余额</div><div>不能低于200，是否现在充值?</div>`;
              this.butName = "立即充值";
              this.isModel = true;
              this.price = 200;
            }
          }
          break;
        case "pushTrusteeshipInfo":
          val = this.pushTrusteeshipInfo;
          if (val) {
            this.isModel = true;
            this.api = "pushSettingOfTrusteeship";
            this.msg = `<div> 是否关闭包租信息推送功能？</div><div>关闭后将不能第一时间获取到包租信息了。</div>`;
          } else {
            if (this.points > 500) {
              this.$router.push({ path: "setCharter", query: { isNew: true } });
            } else {
              this.msg = `<div>要开启本功能，巢果余额</div><div>不能低于500，是否现在充值?</div>`;
              this.butName = "立即充值";
              this.isModel = true;
              this.price = 500;
            }
          }
          // this.$router.push("/setCharter");
          break;
        case "pushGettingHouseMobile":
          val = this.pushGettingHouseMobile;
          if (val) {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: false,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: this.pushInfluencesChange
            };
          } else {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: true,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: this.pushInfluencesChange
            };
          }
          ajax("userSetting/" + this.setId, data, "put", res => {
            if (res.data.code == 200) {
              Toast.success(res.data.msg);
              that.getMySet();
            }
          });
          break;
        case "pushHouseAppointment":
          val = this.pushHouseAppointment;
          if (val) {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: false,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: this.pushInfluencesChange
            };
          } else {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: true,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: this.pushInfluencesChange
            };
          }
          ajax("userSetting/" + this.setId, data, "put", res => {
            if (res.data.code == 200) {
              Toast.success(res.data.msg);
              that.getMySet();
            }
          });
          break;
        case "pushLeavingMessage":
          val = this.pushLeavingMessage;
          if (val) {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: false,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: this.pushInfluencesChange
            };
          } else {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: true,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: this.pushInfluencesChange
            };
          }
          ajax("userSetting/" + this.setId, data, "put", res => {
            if (res.data.code == 200) {
              Toast.success(res.data.msg);
              that.getMySet();
            }
          });
          break;
        case "pushBillStatusChange":
          val = this.pushBillStatusChange;
          if (val) {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: false,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: this.pushInfluencesChange
            };
          } else {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: true,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: this.pushInfluencesChange
            };
          }
          ajax("userSetting/" + this.setId, data, "put", res => {
            if (res.data.code == 200) {
              Toast.success(res.data.msg);
              that.getMySet();
            }
          });
          break;
        case "pushCapitalChange":
          val = this.pushCapitalChange;
          if (val) {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: false,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: this.pushInfluencesChange
            };
          } else {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: true,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: this.pushInfluencesChange
            };
          }
          ajax("userSetting/" + this.setId, data, "put", res => {
            if (res.data.code == 200) {
              Toast.success(res.data.msg);
              that.getMySet();
            }
          });
          break;
        case "pushPointsChange":
          val = this.pushPointsChange;
          if (val) {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: false,
              pushInfluencesChange: this.pushInfluencesChange
            };
          } else {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: true,
              pushInfluencesChange: this.pushInfluencesChange
            };
          }
          ajax("userSetting/" + this.setId, data, "put", res => {
            if (res.data.code == 200) {
              Toast.success(res.data.msg);
              that.getMySet();
            }
          });
          break;
        case "pushInfluencesChange":
          val = this.pushInfluencesChange;
          if (val) {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: false
            };
          } else {
            data = {
              pushMatchingHouse: this.pushMatchingHouse,
              pushRentalDemand: this.pushRentalDemand,
              pushTrusteeshipInfo: this.pushTrusteeshipInfo,
              pushGettingHouseMobile: this.pushGettingHouseMobile,
              pushHouseAppointment: this.pushHouseAppointment,
              pushLeavingMessage: this.pushLeavingMessage,
              pushBillStatusChange: this.pushBillStatusChange,
              pushCapitalChange: this.pushCapitalChange,
              pushPointsChange: this.pushPointsChange,
              pushInfluencesChange: true
            };
          }
          ajax("userSetting/" + this.setId, data, "put", res => {
            if (res.data.code == 200) {
              Toast.success(res.data.msg);
              that.getMySet();
            }
          });
          break;
      }
    },
    sz(e) {
      this.$router.push({ path: e, query: { isNew: false } });
    },
    tishi(e) {
      Toast(e);
    },
    getcg() {
      ajax("user/basicInfo/" + this.$store.state.userId, "", "get", res => {
        if (res.data.code == 200) {
          this.points = res.data.data.points;
          this.weixinNickname = res.data.data.weixinNickname;
          this.weixinPortrait = res.data.data.weixinPortrait;
        }
      });
    },
    jsddk() {
      let data = {
        appid: this.$store.state.appid,
        url: location.href
      };
      ajax("weixin/jssdk/config", data, "post", res => {
        console.log(res);
        if (res.data.code == 200) {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
          });
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.flex_top {
  display: flex;
  background: #fff;
  padding: 0.2667rem;
  font-size: 0.3733rem;
}
.top_num {
  width: 7.5rem;
  overflow: hidden;
}
ul {
  padding: 0 0.2667rem;
  margin-top: 0.2667rem;
  background: #fff;
}
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem;
  border-bottom: 0.0133rem solid #f2f2f2;
}

.box {
  width: 7.7rem;
  padding: 0.6rem 0.5rem;
  background: #fff;
  text-align: center;
  border-radius: 0.08rem;
  z-index: 11;
  overflow: hidden;
}
button {
  width: 4.5rem;
  height: 0.88rem;
  margin-top: 0.6rem;
  background: rgba(246, 205, 72, 1);
  box-shadow: 0px 0.02rem 0.08rem 0px rgba(221, 211, 202, 0.6);
  border-radius: 0.44rem;
}
.img {
  position: relative;
  top: 0;
  right: 0;
  text-align: right;
}
.van-popup--center {
  top: 33%;
}
</style>

